<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个vue.js页面</title>
		<script src="../js/vue.global.js"></script>
	</head>
	<body>
		<!-- 视图 -->
		<div id="example">
			<!-- {{js表达式}}  插值符号{{}} -->
			<p>姓名：{{ name }}</p>
			<!-- 插值符号内容只能出现表达式,不能出现语句 -->
			<p>成绩：{{ score }}</p>
			<p>开设课程：{{courses}}</p>
			<p>PHP课程详细信息：<br>
				<b>课程名称：</b><span>{{php.name}}</span><br>
				<b>任课老师：</b><span>{{php.teacher}}</span><br>
			</p>
		</div>
		<script>
			// 1.创建Vue实例，对象的属性、方法都是小驼峰写法
			// createApp(根组件).mount(视图)
			var app = Vue.createApp({
				// 状态数据，ES5 => ES6
				// data:function(){}	ES5
				data() {
					return{
						name:"陈智康",
						score:100,
						isShow:false,
						courses:[
							"Vue.js前端开发",
							"web程序设计"
						],
						php:{id:'1010101',name:"web程序设计(PHP)",teacher:'李忠明'}
					}
				},
				// 方法
				methods:{
					haveBreadFirst(){},
					haveStudy(){}
				},
				// 子组件
				components:{},
				// 生命周期函数
			})
			// 将Vue实例挂在到视图
			app.mount('#example')
		</script>
	</body>
</html>